<template>
     <div class="dialog-content">
      <el-tabs v-model="activeTab" type="card">
        <el-tab-pane
          v-for="item in list"
          :key="item.tab_name"
          :label="item.tab_name"
          :name="item.tab_name"
        >
          <CodeHighlighter :code="item.code" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, defineProps,onMounted, computed } from "vue";
  import { ElTabs, ElTabPane } from 'element-plus';
  import CodeHighlighter from './CodeHighlighter.vue'; // 确保引入 CodeHighlighter 组件
  import {
    previewCode
} from "@/api/tools";
  const props = defineProps({
  formModel: {
    type: Object,
    required: true,
    default: () => ({id:0  })
  }
});
const newFormInline = ref({ ...props.formModel });
  // 定义选项卡和代码内容的数组
  const list = ref([]);
  // 控制激活的选项卡
  const activeTab = computed(() => {
  return list.value.length > 0 ? list.value[0].tab_name : null; // 如果 list 为空，返回 null 或者你想要的默认值
});

  async function onSearch() {
     const { data } = await previewCode({id:newFormInline.value.id});
     list.value = data
  }

  onMounted(async () => {
    onSearch();
  });
  </script>
  
  <style>
  .dialog-content {
    max-height: calc(100vh - 100px); /* 设置对话框内容的最大高度 */
    overflow: hidden; /* 确保对话框内的滚动条不干扰 */
  }
  </style>
  